// onload 等页面所有内容(文档,图片,script)加载完毕再执行

console.log(1);
window.onload = function () { // 页面加载时只做绑定 => 等页面所有内容加载完毕再执行
    console.log(2);
    var box = document.getElementsByClassName("box")[0];
    console.log(box);

    box.onclick = function () {
        // box.style.backgroundColor = "red";
        box.style.backgroundColor = randColor();
    }

    // 颜色写法
    // 单词:      red orange yellow green
    // 16进制:    #ff0000  #66ffff  #666666 
    // rgba():    rgba(255,255,255,1);
    function randColor() {
        // return `rgba(${Math.round(Math.random() * 255)},${Math.round(Math.random() * 255)},${Math.round(Math.random() * 255)},1)`;

        var colorStr = "0123456789abcdef";  // 16 

        var str = "#";
        for (var i = 0; i < 6; i++) {
            // var index = Math.round(Math.random() * (colorStr.length - 1));
            var index = Math.floor(Math.random() * colorStr.length);
            var char = colorStr.charAt(index);
            str += char;
        }
        console.log(str);
        return str;
    }
}

console.log(3);